<template>
  <div class="divBox" style="padding-bottom:0;">
    <el-row :gutter="20" class="baseInfo">
      <router-link to="/Photo?filtrate=10">
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div  class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <!-- <div class="main_badge">
                  <span class="iconfont iconxinzengyonghu"></span>
                </div> -->
                <span class="main_tit">待办数量</span>
              </div>
              <!--            <el-tag type="primary">今日</el-tag>-->
            </div>
            <div class="content" v-if="viewData">
              <span class="content-number spBlock my15">{{ viewData.noGreenLight }}</span>
              <!--            <el-divider></el-divider>-->
              <!--            <div class="acea-row row-between-wrapper">-->
              <!--              <span class="content-time">昨日数据</span>-->
              <!--              <span class="content-time">{{ viewData.yesterdayAddUserCount }}2 人</span>-->
              <!--            </div>-->
            </div>
          </el-card>
        </el-col>
      </router-link>
        <div @click="skip">
          <el-col v-bind="grid" class="ivu-mb">
            <el-card :bordered="false" dis-hover :padding="12" >
              <div  class="acea-row row-between-wrapper">
                <div class="acea-row align-center">
                  <!-- <div class="main_badge">
                    <span class="iconfont iconxiaoshoue"></span>
                  </div> -->
                  <span class="main_tit" >投诉数量</span>
                </div>
                <!--            <el-tag type="primary">今日</el-tag>-->
              </div>
              <div class="content" v-if="viewData">
                <span class="content-number spBlock my15">{{ viewData. allCount}}</span>
                <!--            <el-divider></el-divider>-->
                <!--            <div class="acea-row row-between-wrapper">-->
                <!--              <span class="content-time">昨日数据</span>-->
                <!--              <span class="content-time">{{viewData.yesterdayFormCount}}12 个</span>-->
                <!--            </div>-->
              </div>
            </el-card>
          </el-col>
        </div>
      <div @click="skip">
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div  class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <!-- <div class="main_badge">
                  <span class="iconfont iconxiaoshoue"></span>
                </div> -->
                <span class="main_tit">办结数量</span>
              </div>
              <!--            <el-tag type="primary">今日</el-tag>-->
            </div>
            <div class="content" v-if="viewData">
              <span class="content-number spBlock my15">{{ viewData.statusCount }}</span>
              <!--            <el-divider></el-divider>-->
              <!--            <div class="acea-row row-between-wrapper">-->
              <!--              <span class="content-time">昨日数据</span>-->
              <!--              <span class="content-time">{{viewData.yesterdayRegisterCount}}1 个</span>-->
              <!--            </div>-->
            </div>
          </el-card>
        </el-col>
      </div >

      <div v-if="viewData.roles==1">
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div  class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <!-- <div class="main_badge">
                  <span class="iconfont iconyonghu"></span>
                </div> -->
                <span class="main_tit">用户访问量</span>
              </div>
              <!--            <el-tag type="primary">今日</el-tag>-->
            </div>
            <div class="content" v-if="viewData">
              <span class="content-number spBlock my15">{{ viewData.userCount }}</span>
              <!--            <el-divider></el-divider>-->
              <!--            <div class="acea-row row-between-wrapper">-->
              <!--              <span class="content-time">昨日数据</span>-->
              <!--              <span class="content-time">{{ viewData.yesterdayUserVisitCount }}2</span>-->
              <!--            </div>-->
            </div>
          </el-card>
        </el-col>
      </div>
      <div @click="skip2"  v-if="viewData.roles==1">

        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div  class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <!-- <div class="main_badge">
                  <span class="iconfont iconxinzengyonghu"></span>
                </div> -->
                <span class="main_tit">用户总数</span>
              </div>
              <!--            <el-tag type="primary">今日</el-tag>-->
            </div>
            <div class="content" v-if="viewData">
              <span class="content-number spBlock my15">{{ viewData.userAllCount }}</span>
              <!--            <el-divider></el-divider>-->
              <!--            <div class="acea-row row-between-wrapper">-->
              <!--              <span class="content-time">昨日数据</span>-->
              <!--              <span class="content-time">{{ viewData.yesterdayAddUserCount }}2 人</span>-->
              <!--            </div>-->
            </div>
          </el-card>
        </el-col>
      </div>

    </el-row>
  </div>
</template>
<script>
import { getUserCensusApi, selectNoGreenLightListApi, viewModelApi } from '@/api/dashboard'
  export default {
    data() {
      return {
        grid: { xl: 6, lg: 6, md: 12, sm: 12, xs: 24},
        viewData:{},
        viewData1:{},
        filtrate:10,
      }
    },
    methods: {

      skip(){
        this.$router.push({name: 'Photo',})
      },
      skip2(){
        this.$router.push({name: 'User',})
      },
      skip3(){
        this.$router.push({name: 'Photo',params:{filtrate:this.filtrate}})
        // selectNoGreenLightListApi({page:0,limit:10}).then(async res => {
        //   //后期接口调用
        //   console.log(res)
        // })
      },

      statisticsOrder() {
        viewModelApi().then(async res => {
        //后期接口调用
         this.viewData = res;
        })
      },
      getUserCensus() {
        getUserCensusApi().then(async res => {
          //后期接口调用
          this.viewData1 = res;
        })
      },
    },
    mounted() {
      this.statisticsOrder();
      // this.getUserCensus()
    }
  }
</script>
<style scoped lang="scss">
  ::v-deep{
    .el-col-xl-6{
      width: 20%;
    }
  }
  .ivu-mb{
    margin-bottom: 20px;
  }
  .up, .el-icon-caret-top {
    color: #F5222D;
    font-size: 12px;
    opacity: 1 !important;
  }

  .down, .el-icon-caret-bottom {
    color: #39C15B;
    font-size: 12px;
    /*opacity: 100% !important;*/
  }
  .main_tit{
    color: #333;
    font-size: 14px;
    font-weight: 500;
  }
  .content-time{
    font-size: 14px;
    color:#333;
    font-weight: 500;
  }
  .main_badge{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    margin-right: 10px;
    background: #2C90FF;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .my15{
    margin: 15px 0 15px;
  }
  .align-center{
    align-items: center;
  }
  .baseInfo {
    ::v-deep .el-card__header {
      padding: 15px 20px !important;
    }
  }

  .content {
    &-number {
      font-size: 30px;
      font-weight: 600;
      font-family: PingFangSC-Semibold, PingFang SC;
      color: #333;
    }
    &-time{
      font-size:14px;
      color: #333333;
      font-weight: 400;
    }
  }
</style>
